<!--设备属性编辑界面-->
<template>
  <!-- <roleBody> -->
  <div class="roleManager">


    <div class="set-left">
      <div class="set-title-top">
        <span class="set-title">角色管理</span>
        <el-button type="primary" size="mini" @click="add_ed">新增</el-button>
      </div>
      <el-scrollbar style="height:92%;width: 100%;">
        <div :class="['item',{'active':item.id == itemActive}]" v-for="(item,index) in roleList" :key="item.roleid"
          @click="chooseRole(item)">
          <div class="name" style="font-size:14px">{{index +1}}.{{item.rolename}}</div>
          <p class="memo" style="font-size:12px;margin-top:10px">备注：{{item.memo}}</p>
          <div class="is-btn">
            <div class="set-caozuo">
              <div @click.stop="edit_ed(item)" class="set-btns" style="margin-right:16px">
                <el-tooltip effect="dark" content="修改" placement="top">
                  修改
                </el-tooltip>
              </div>
              <div @click.stop="deleteEntity" class="set-btns">
                <el-tooltip effect="dark" content="删除" placement="top">
                  删除
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>


    <!-- 右边 -->
    <div class="rightBody">
      <div class="areaContainer">
        <div class="save-btn">
          <el-button type="primary" size="mini" @click="saveAuth">保存修改</el-button>
        </div>
        <webRight ref="webRightView"></webRight>
      </div>
      <!-- 加载中 -->
      <div class="el-loading-mask" v-show="loading">
        <div class="el-loading-spinner">
          <svg viewBox="25 25 50 50" class="circular">
            <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
          </svg>
        </div>
      </div>
    </div>
    <!-- 新增修改 -->
    <el-dialog width="20%" draggable :title="textMap[dialogStatus]" :close-on-click-modal='false'
      :visible.sync="dialogVisible">
      <div style="display: flex;">
        <el-form :model="temp" ref="temp" :rules="rules" style="width: 80%;height: 120px;padding-top: 10px;">
          <el-form-item label="名称:" prop="rolename">
            <el-input v-model="temp.rolename" style=""></el-input>
          </el-form-item>

          <el-form-item label="备注:" prop="memo">
            <el-input v-model="temp.memo"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogStatus==='edit'?edit_fn('temp'):add_fn('temp')">保存</el-button>
      </div>
    </el-dialog>
  </div>
  <!-- </roleBody> -->
</template>

<script type="text/javascript">
  let id=1000;
  import webRight from './webRight.vue'
  import appRight from './appRight.vue'
  import miniRight from './miniRight.vue'
  //import systemRight from './systemRight.vue'
  import roleManagerStore from './roleManagerStore.js'
  export default {
    components: {
      webRight,
      appRight,
      miniRight,
      //systemRight
    },
    props: [],
    data () {
      return {
        loading: false,
        dialogVisible: false,
        dialogStatus: '',
        textMap: {
          add: "新增角色",
          edit: "修改角色"
        },
        //新增修改对象
        temp: {
          'rolename': "",
          'memo': "",
        },
        //星号必填
        rules: {
          rolename: [
            {required: true,message: '请输入名称',trigger: 'blur'}
          ]
        },
        tabPage: 0,
        picked: false,//用户是否有勾选权限标识
        titleList: [{name: '名称'},{name: '图形文件'},{name: '网站页面'},{name: '描述'}],
        nowProperty: '',
        checkedList: [],//!!!!!勾选的 authList
        roleColumns: [
          {
            name: '名称',
            key: 'rolename'
          },{
            name: '备注',
            key: 'memo'
          }
        ],
        itemActive: "",
        leftData: []
      }
    },
    created () {
      debugPage=this

    },
    mounted () {
      //预获取一些数据
      // this.doQuery();
    },
    destroyed () {},
    computed: {
      userSelected () {
        return roleManagerStore.state.nowRole
      },
      nowUnit () {
        return this.$store.unitStore.getters.getNowUnit
      },
      roleList () {
        // console.log("左边",this.$store.roleStore.getters.getRoleList);
        this.leftData=this.$store.roleStore.getters.getRoleList
        return this.$store.roleStore.getters.getRoleList
      },
      getResourcesByName () {
        return this.$store.resourcesStore.getters.getResourcesByName
      },
      archivesStore () {
        return this.$store.archivesStore
      },
      getEnumByEnumCode () {
        return this.$store.enumStore.getters.getEnumByEnumCode
      },
      getValueTypeText () {
        return this.archivesStore.getters.getValueTypeText
      },
      getAlignText () {
        return this.archivesStore.getters.getAlignText
      },
      entityInfo () {// 加载对应单位的用户列表
        var info=copy(this.nowEntity)
        info.editable=info.editable==1? "是":"否"
        return [info]
      },
      entityInfoLen () {
        var info=copy(this.nowEntity)
        return [info].length;
      },
    },
    watch: {
      nowProperty: {
        handler (nv,ov) {
        },
        immediate: true,
        deep: true
      },
      leftData (val) {
        if(val.length!=0) {
          this.chooseRole(val[0])
        }
      }

    },
    methods: {
      // 分页切换
      tabPageChange (i) {
        if(this.tabPage==i) {
          return
        }
        if(i==0) {
          if(this.$refs.appRightView.needSave) {
            this.$dialogMethod.openAgreeDialog("有修改尚未保存","是否进行保存后再离开",confirm => {
              return
            },cancel => {
              this.tabPage=i
              this.$refs.appRightView.resetDatas()
            },true)
          } else {
            this.tabPage=i
            this.$refs.appRightView.resetDatas()
          }
        } else {
          if(this.$refs.webRightView.needSave) {
            // 弹窗确认是否进行保存
            this.$dialogMethod.openAgreeDialog("有修改尚未保存","是否进行保存后再离开",confirm => {
              return
            },cancel => {
              this.tabPage=i
              this.$refs.webRightView.coverCheckedIds()
            },true)
          } else {
            this.tabPage=i
            this.$refs.webRightView.coverCheckedIds()
          }
        }
      },
      getAndSetRightsByRoleId (roleid) {
        this.$api.menuApi.getRightsByRoleIds(roleid,
          respon => {
            this.checkedList=respon;
            //this.$refs.elt.setCheckedKeys(respon)
          },respon => {
            this.checkedList=[]
            this.$dialogMethod.showMessage(respon)
            //this.$refs.elt.setCheckedKeys([])
          })
      },
      chooseRole (item) {
        this.itemActive=item.roleid
        if(!isempty(item)) {
          this.loading=true
          roleManagerStore.commit('setUnit',this.nowUnit)
          if(item==undefined) {
            roleManagerStore.commit('setRole',{})
          } else if(this.userSelected.id==undefined||this.userSelected.id!=item.id) {
            roleManagerStore.commit('setRole',item)
          }
          this.getAndSetRightsByRoleId(item.roleid)
          this.nowProperty=item
          this.loading=false
        }
      },
      clean () {
        this.$store.roleStore.commit('cleanRole')
      },
      //刷新
      Refresh_fn () {

      },

      pickItem (state,data) {// data 对象   , state : true  false
        let had=this.checkedList.indexOf(data.id)>-1
        if(state&&!had) {
          this.checkedList.push(data.id)
          let list=data.childRights;
          for(let i=0;i<list.length;i++) {
            this.pickItem(state,list[i])
          }
        } else if(!state&&had) {
          let index=this.checkedList.indexOf(data.id)
          this.checkedList.splice(index,1)
          let list=data.childRights;
          for(let i=0;i<list.length;i++) {
            this.pickItem(state,list[i])
          }
        }
        this.picked=true;
      },
      saveAuth () {
        this.$refs.webRightView.saveEdit()

      },

      deleteEntity () {
        this.$confirm(`是否删除 ${this.nowProperty.rolename}`,'提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.$api.roleApi.deleteRole(this.nowProperty.roleid,respon => {
            this.$message({showClose: true,message: '删除成功',type: 'success'});
            this.nowProperty='';
            this.clean()
            // this.doQuery()
          },respon => {
            respon? this.$message.error(respon):this.$message.error('删除失败');
          })

        }).catch(() => {
          // ...
        });
      },


      // 添加弹窗
      add_ed (v,l) {
        this.temp.rolename=''
        this.temp.memo=''
        this.dialogStatus='add';
        this.dialogVisible=true;
        this.$nextTick(() => {
          this.$refs["temp"].clearValidate();
        });
        // this.temp = { EnergyTypeParentId: v || null};
      },
      // 确认添加
      add_fn (formName) {
        this.$refs[formName].validate(valid => {
          if(valid) {
            // console.log(this.temp,'this.temp');
            // console.log(this.roleList,'this.roleList');
            var flag=false;
            this.roleList.map(v => {
              if(this.temp.rolename===v.rolename) {
                // console.log(v.rolename,'v.rolename');
                // console.log(this.temp.rolename,'v.222');
                flag=true;//有相同名称
                return
              }
            })

            if(flag) {
              this.$message({showClose: true,message: '名称不能重复！',type: 'info'});
              return
            }
            this.$api.roleApi.saveRole('',this.temp.rolename,this.temp.memo,respon => {
              this.dialogVisible=false;
              this.$message({showClose: true,message: '添加成功',type: 'success'});
              this.nowProperty='';
              this.clean()
            },respon => {
              if(respon) {
                this.$message.error(respon);
              } else {
                this.$message.error('添加失败');
              }
            })
          } else {
            return false;
          }
        });
      },

      // 确认编辑
      edit_fn () {
        this.$refs['temp'].validate(valid => {
          if(valid) {
            var data=this.temp
            this.$api.roleApi.saveRole(this.nowProperty.roleid,data.rolename,data.memo,respon => {
              this.dialogVisible=false;
              this.$message({showClose: true,message: '修改成功',type: 'success'});
              this.nowProperty='';
              this.clean()
              // this.doQuery()
            },respon => {
              this.$dialogMethod.showMessage(respon)
              if(respon) {
                this.$message.error(respon);
              } else {
                this.$message.error('修改失败');
              }
            })

          } else {
            return false;
          }
        });
      },
      //编辑弹窗
      edit_ed (v) {
        // console.log("编辑",v);
        this.dialogStatus='edit';

        this.temp=Object.assign({},v);

        this.dialogVisible=true;

        this.$nextTick(() => {
          this.$refs["temp"].clearValidate();
        });

      },
    }
  }
</script>

<style scoped lang="scss">
  .roleManager {
    display: flex;
    // /deep/.el-scrollbar__wrap {
    //    width: 100%;
    // }
    .set-title-top {
      display: flex;
      justify-content: space-between;
      align-items: center;

      :deep(.el-button) {
        margin-right: 0px !important;
        padding: 6px 11px;
      }


    }

    .set-left .item {
      position: relative;

    }


    .is-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-70%);
      right: 10px;
      display: none;
    }

    .set-caozuo {
      display: flex;
    }

    .set-left .item:hover {
      color: #1a1a1a;

      .is-btn {
        display: block;
      }
    }
  }

  .rightBody {
    width: calc(100% - 274px);
    //  flex-grow: 1;
    height: 100%;
    background-color: #fff;
    position: relative;

    .areaContainer {
      position: relative;
    }

    .save-btn {
      position: absolute;
      top: 12px;
      right: 8px;
    }
  }


  .block {
    width: 100%;
  }

  .custom-tree {
    width: 100%;

  }

  :deep(.el-dialog__header ){
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E6E6E6;

    span {
      color: #67A3ED;
      font-size: 14px;
      font-weight: bold;
    }

    .el-icon-close {
      font-size: 20px !important;
    }

  }

  :deep(.el-dialog__footer) {
    margin-top: 20px;
    text-align: right !important;
    border-top: 1px solid #E6E6E6;

    button {
      padding: 8px 17px;
    }
  }

  .demo-temp {
    display: flex;
    flex-wrap: wrap;
  }

  :deep(.el-form-item ){
    display: flex;
    margin-left: 20px;
  }

  :deep(.el-form-item__label) {
    white-space: nowrap;
    width: 54px;
  }

  :deep(.el-dialog__body) {
    padding: 20px 0px 0px 20px !important;
  }

  .custom-tree-node {
    text-align: center;
    width: calc(100% - 17px);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    /* padding-right: 8px; */
    /* border-bottom: 1px solid #000000; */
  }

  .custom-tree-node-ex {
    width: 6rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 14px;
    padding-right: 8px;
  }

  .custom-tree-node-ex span {
    flex: 1;
    border-left: 1px solid #000000
  }

  .btn-group {
    position: fixed;
    bottom: 0.1rem;
    right: 0.5rem;
    display: flex;
    align-content: center;
  }

  .tabsHeader {
    // margin: 10px 5px;
    overflow: hidden;
  }

  .tabBtnsContainer {
    float: left;
    // border: solid 2px #D1D1D1;
    // border-radius: 16px;
  }

  :deep(.infolist-table-body) {
    border: 0px !important;
    border-bottom: 1px solid #ddd !important;
  }

  :deep(.tree-head) {
    background-color: #f3f8ff !important;
  }

  :deep(.tree-head td) {
    color: #1a1a1a !important;
    box-sizing: border-box;
  }

  :deep(.list-body>li) {
    border-bottom: 1px solid dashed;
  }

  .tabBtnsContainer>button {
    cursor: pointer;
    // width: 100px;
    height: 30px;
    // border-radius: 15px;
    // background: #FFFFFF;
    // color: #3D7EFF;
    background-color: #fff;
    color: #999999;
    outline: none;
    font-weight: bold;
    font-size: 15px;
    margin-left: 20px;
    margin-top: 16px;
    margin-bottom: 20px;
  }

  .tabBtnsContainer>.tabActive {
    // background: #3D7EFF;
    // color: #FFFFFF;
    // color: #529FFF;
    color: #2a8e7c;
    // width: 110px;
    border-bottom: 2px solid #2a8e7c;
      color: #529FFF;
    border-bottom: 2px solid #529FFF;

  }

  .tree {
    width: 5rem;
    background-color: #fff;
  }

  .areaTitle {
    font-size: .15rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // line-height: 16px;
    // border-left: solid 4px #3D7EFF;
    // padding-left: 8px;
    // margin: 15px 10px;
    // margin-bottom: 8px;
    padding-top: 13px;
    margin-right: 20px;
    // margin-top: 25px;
    margin-left: 20px;
    color: #999999;
  }
</style>